<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="~{common::css}"></div>
    <title>归档</title>
</head>
<body class="m-body">
<!--导航-->
<div th:replace="~{common::topbar(n=4)}"></div>
<div class="ui  attached pointing menu" >
    <div class="ui  container">
        <div class="right menu" >
            <a  class=" ui   green  button" >按年份查询</a>
            <form  name="searchByYear" th:action="@{/archivesByYear/1}" target="_blank" method="get" >
                <div class="ui teal icon mini  transparent button "  style="position: absolute;right: 10px" >
                    <input type="text" name="quarry" value="2020" placeholder="Search...."  autocomplete="off" style="color: #00c4ff;font-size: 10px;border-radius: 16px;">
                    <i onclick="document.forms['searchByYear'].submit()" class="search link icon"></i>
                </div>
            </form>

        </div>
    </div>
</div>
<!--中间内容-->
<div class="m-padded-tb-big m-container-small" >
    <div class="ui container">
        <!--header-->
        <div class="ui top attached segment">
            <div class="ui middle aligned two column grid" style="background: #cdafcd">
                <div class="column" >
                    <h2 class="ui  teal header">归档</h2>
                </div>
                <div class=" right aligned column">
                    共<h3 class="ui orange header m-inline-block m-text-thin"th:text="${#arrays.length(year2020)+#arrays.length(year2021)}">144</h3>篇
                </div>
            </div>
        </div>
        <h2 class="ui center green aligned header"  >2021</h2>
        <div class="ui fluid vertical menu" th:each="year21:${year2021}" th:object="${year21}" style="background: #a9ddea">
            <a th:href="@{/search(quarry=${year21.getTitle()})}" class="item" target="_blank" >
                <span >
                    <i class=" mini teal circle icon" ></i> <span th:text="${year21.getTitle()}"></span>
                    <div class="ui teal basic left pointing label m-padded-tb-mini" th:text="${#dates.format(year21.getCreateTime(),'yyyy-MM-dd')}">09-03</div>
                </span>
                <div class="ui orange  left pointing label m-padded-tb-mini" th:text="${year21.getFlag()}">原创</div>
            </a>
        </div>
        <h2 class="ui center green aligned header">2020</h2>
        <div class="ui fluid vertical menu" th:each="year20:${year2020}" style="background: #c9c1e3">
            <a th:href="@{/search(quarry=${year20.getTitle()})}" class="item" target="_blank">
                <span>
                    <i class=" mini green circle icon" ></i>&nbsp;&nbsp;&nbsp;&nbsp; <span class="ui teal " th:text="${year20.getTitle()}"></span>
                    <div class="ui teal basic left pointing label m-padded-tb-mini" th:text="${#dates.format(year20.getCreateTime(),'yyyy-MM-dd')}" >09-03</div>
                </span>
                <div class="ui orange  left pointing label m-padded-tb-mini" th:text="${year20.getFlag()}">翻译</div>
            </a>
        </div>
    </div>


</div>
<!--底部 footer-->
<div th:replace="~{common::footer}"></div>


<script src="../static/js/jquery-3.5.1.js" th:src="@{/js/jquery-3.5.1.js}"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script>
        $('.menu.toggle').click(function (){
            $('.m-item').toggleClass('m-mobile-hide');

        });
        $('.ui.dropdown').dropdown({
            on : 'hover',
        });
    </script>
</body>

</html>